<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foxglove Studio</title>
    <link rel="stylesheet" href="style.css?v=3">
</head>
<body>
    <h1>Foxglove Studio</h1>
    <nav>
        <ul>
            <li><a href="#install">1 安装</a></li>
            <li>
                <a href="#dev">2 二次开发</a>
                <ul>
                    <li><a href="#dependencies">2.1 项目依赖</a></li>
                    <li><a href="#dev-started">2.2 开发起步</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <p><a href="https://foxglove.dev/" target="_blank">Foxglove Studio</a> 是一个面向机器人开发的可视化和调试工具。通过各种可视化面板，可以快速掌握机器人的运行数据。</p>

    <h2 id="install">1 安装</h2>
    <p>
        通过官方<a href="https://foxglove.dev/download" target="_blank">下载地址</a>可以下载 Linux、Windows 和 macOS 平台的客户端，也可以直接<a href="https://studio.foxglove.dev/" target="_blank">在线打开</a>。Foxglove Studio 也开放了源码，可以通过二次开发托管到自己域名下。
    </p>
    <p>
        为了方便自托管，可以使用官方提供的 Docker 镜像：
    </p>
    <pre>docker run --rm -p "8080:8080" ghcr.io/foxglove/studio:latest</pre>
    <p>此时，通过 localhost:8080 就可以在浏览器访问 Foxglove Studio。</p>

    <h2 id="dev">2 二次开发</h2>
    <p>
        <a href="https://github.com/foxglove/studio" target="_blank">foxglove/studio</a> 提供了 Foxglove Studio 的源码，开发语言是 <a href="./typescript.html">TypeScript</a>，桌面端使用了 Electron 框架。
    </p>

    <h3 id="dependencies">2.1 项目依赖</h3>
    <ul>
        <li>Node.js v14+</li>
        <li><a href="yarn.html">Yarn</a> - <code>npm install -g yarn</code></li>
        <li><a href="git-lfs.html" title="Git Large File Storage">Git LFS</a></li>
    </ul>

    <h3 id="dev-started">2.2 开发起步</h3>
    <ol>
        <li>克隆仓库</li>
        <li>安装并设置 Git LFS：<code>git lfs install</code></li>
        <li>下载当前分支对应的 Git LFS 文件：<code>git lfs pull</code></li>
        <li>安装项目依赖：<code>yarn install</code></li>
        <li>启动开发环境：</li>
    </ol>

<pre># 启动桌面端
$ yarn serve    # 启动 webpack
$ yarn start    # 启动 electron

# 启动浏览器 App
$ yarn web:serve

# 启动浏览器 App，同时开启本地后端实例
$ yarn web:serve:local

# 高级用法：在同一网络不同主机分别启动 webpack 和 electron
$ yarn serve --host 192.168.xxx.yyy
$ yarn dlx electron@13.0.0-beta.13 .webpack

# 使用生产环境的 API 接口启动桌面端
$ yarn serve --env FOXGLOVE_BACKEND=production
$ yarn start

# 注意：yarn web:serve 不支持连接生产环境接口</pre>

<blockquote>安装依赖过程中，<code>@sentry/cli</code>有可能报错，此时可以<a href="./sentry.html#set-mirror">设定国内镜像地址</a>。</blockquote>


</body>
</html>